<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex flex-wrap align-center justify-between benben-position-layout flex serviceApply_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center serviceApply_fd0_0' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<image class='serviceApply_fd0_0_c0' mode="aspectFit" :src='STATIC_URL+"296.png"'></image>
				</view>
				<text class='serviceApply_fd0_1'>{{$t('申请售后')}}</text>
				<view class='flex flex-wrap align-center serviceApply_fd0_0'>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---申请售后-售后flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout serviceApply_flex_1">
				<view class='flex flex-wrap align-center serviceApply_fd1_0'>
					<image class='serviceApply_fd1_0_c0' mode="aspectFill" :src='dataShopInfo.goods_thumb'></image>
					<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
						<text class='serviceApply_fd1_0_c1_c0'>{{dataShopInfo.goods_name}}</text>
						<text class='serviceApply_fd1_0_c1_c1'>{{dataShopInfo.sku_name}}</text>
						<view class='flex flex-wrap align-center'>
							<text class='serviceApply_fd1_0_c1_c2_c0'>{{$t('¥')}}</text>
							<text class=' serviceApply_fd1_0_c1_c2_c1'>
								<text>{{ dataShopInfo.shop_price | frontPrice }}</text>
								<text
									class=' serviceApply_price2_fd1_0_c1_c2_c1'>{{ dataShopInfo.shop_price | laterPrice }}</text>
							</text>
							<text class='serviceApply_fd1_0_c1_c2_c2'>x</text>
							<text class='serviceApply_fd1_0_c1_c2_c3'>{{dataShopInfo.num}}</text>
						</view>
					</view>
				</view>
			</view>

			<!---申请售后-售后flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center serviceApply_flex_2">
			</view>

			<!---flex布局flex布局结束-->
			<!---申请售后-售后原因flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout serviceApply_flex_3">
				<view class='flex flex-wrap align-center serviceApply_fd3_0' @tap.stop="pickerDiy1679907974294=true">
					<text class='serviceApply_fd3_0_c0'>{{$t('售后选择')}}</text>
					<benben-input class='serviceApply_fd3_0_c1' type="text" :placeholder="$t('请选择售后类型')"
						confirm-type="done" :maxlength="-1" :disabled='true'
						placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx" v-model="afterSaleLable" />
					<image class='serviceApply_fd3_0_c2' mode="aspectFit" :src='STATIC_URL+"508.png"'></image>
				</view>
				<view class='flex flex-wrap align-center serviceApply_fd3_0' @tap.stop="pickerDiy1679907850983=true">
					<text class='serviceApply_fd3_0_c0'>{{$t('退款原因')}}</text>
					<benben-input class='serviceApply_fd3_0_c1' type="text" :placeholder="$t('请选择退款原因')"
						confirm-type="done" :maxlength="-1" :disabled='true'
						placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx" v-model="reason_name" />
					<image class='serviceApply_fd3_0_c2' mode="aspectFit" :src='STATIC_URL+"508.png"'></image>
				</view>
				<view class='flex flex-wrap align-center serviceApply_fd3_2'>
					<text class='serviceApply_fd3_2_c0'>{{$t('退款数量')}}</text>

					<benben-flex-number-box class-name='flex align-center self-center justify-center flex'
						input-class='serviceApply_numberBoxInputfd3_2_c1' v-model="num"
						:max="dataShopInfo.can_refund_num" :min="1" :step="1" :opacity="0.3" @change="getMoneyFunc()">
						<template #minus>
							<image class='serviceApply_fd3_2_c1_c0' mode="aspectFill" :src='STATIC_URL+"509.png"'>
							</image>
						</template>
						<template #plus>
							<image class='serviceApply_fd3_2_c1_c0' mode="aspectFill" :src='STATIC_URL+"510.png"'>
							</image>
						</template>

					</benben-flex-number-box>

				</view>
				<view class='flex flex-wrap align-center serviceApply_fd3_3'>
					<text class='serviceApply_fd3_0_c0'>{{$t('退款金额：')}}</text>
					<text class='serviceApply_fd3_3_c1'>{{$t('¥')}}</text>
					<text class=' serviceApply_fd3_3_c2'>
						<text class=' serviceApply_price1_fd3_3_c2'>{{ dataMoney.refund_money | frontPrice }}</text>
						<text class=' serviceApply_price2_fd3_3_c2'>{{ dataMoney.refund_money | laterPrice }}</text>
					</text>
				</view>
				<text class='serviceApply_fd3_4'>{{$t('不包含运费')}}</text>
				<view class='flex flex-wrap align-center serviceApply_fd3_5'>
					<text class='serviceApply_fd3_0_c0'>{{$t('退款说明')}}</text>
				</view>
				<view class='flex-direction flex-wrap align-stretch flex serviceApply_fd3_6'>
					<textarea class='flex-sub serviceApply_input_fd3_6' confirm-type="done"
						:placeholder="$t('请在此描述申请售后服务的原因')" :maxlength="800" :show-num='true'
						placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="content" />
					<template>
						<view class='flex flex justify-end serviceApply_numberfd3_6_c0'>
							<text class='serviceApply_numberfd3_6_c0_c0'>{{content.length}}</text>
							<text class='serviceApply_numberfd3_6_c0_c0'>/</text>
							<text class='serviceApply_numberfd3_6_c0_c0'>800</text>
						</view>
					</template>
				</view>
				<view class='flex flex-wrap align-center'>
					<benben-images-upload ref="benbenImagesUploadfd3_7_c0" :img-list.sync="url" :img-ids.sync="image"
						:maxlength="9">
						<template #content="{ num, maxlength, isShow, imgList }">
							<view class="flex flex-wrap align-start flex">

								<view v-for="(image, index) in imgList" :key="index"
									class='flex position-relative serviceApply_fd3_7_c00'>
									<text class='fu-iconfont2 position-absolute serviceApply_fd3_7_c000'
										@tap.stop="$refs.benbenImagesUploadfd3_7_c0.delImage(index)">&#xE8E7;</text>
									<image class='serviceApply_fd3_7_c001'
										@tap.stop="$refs.benbenImagesUploadfd3_7_c0.previewImage(index)" :src='image'>
									</image>
								</view>
								<image class='serviceApply_fd3_7_c01'
									@tap.stop="$refs.benbenImagesUploadfd3_7_c0.manyChooseImage()" v-if="isShow"
									mode="aspectFit" :src='STATIC_URL+"511.png"'></image>
							</view>
						</template>
					</benben-images-upload>
				</view>
				<view class='flex align-stretch justify-center serviceApply_fd3_8'>
					<button class='serviceApply_fd3_8_c0' @tap.stop="submitRefundFunc()">{{$t('提交')}}</button>
				</view>
			</view>

			<!---申请售后-售后原因flex布局结束-->
			<!--售后原因选择器开始 -->
			<benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1679907850983"
				:label.sync='reason_name' :value.sync='reason_id' :options='refundReason' mode='selector'
				:mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
				:default-props='{"label":"reason","value":"aid"}'>
				<template #picker-header>
					<view class='flex flex-wrap align-center justify-between serviceApply_picker4_0'>
						<text class='serviceApply_picker4_0_c0'
							@tap="$refs.benbenWritePickerCodepicker4.cancel()">{{$t('取消')}}</text>
						<text class='serviceApply_picker4_0_c1'>{{$t('退款原因')}}</text>
						<text class='serviceApply_picker4_0_c2'
							@tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">{{$t('确定')}}</text>
					</view>
				</template>
			</benben-picker>
			<!--售后原因选择器结束 -->
			<!--售后类型选择器开始 -->
			<benben-picker ref="benbenWritePickerCodepicker5" :visible.sync="pickerDiy1679907974294"
				:label.sync='afterSaleLable' :value.sync='afterSaleID' :options='afterSale' mode='selector'
				:mask-show='true' :timeout='true' :picker-height='88' default-type='value'
				:default-props='{"label":"name","value":"value"}'>
				<template #picker-header>
					<view class='flex flex-wrap align-center justify-between serviceApply_picker5_0'>
						<text class='serviceApply_picker5_0_c0'
							@tap="$refs.benbenWritePickerCodepicker5.cancel()">{{$t('取消')}}</text>
						<text class='serviceApply_picker5_0_c1'>{{$t('售后类型')}}</text>
						<text class='serviceApply_picker5_0_c2'
							@tap="$refs.benbenWritePickerCodepicker5.pickerConfirm()">{{$t('确定')}}</text>
					</view>
				</template>
			</benben-picker>
			<!--售后类型选择器结束 -->


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"pickerDiy1679907974294": false,
				"pickerDiy1679907850983": false,
				"dataShopInfo": {
					"aid": "",
					"shop_price": "",
					"num": "",
					"order_status": "",
					"goods_thumb": "",
					"usermerchant_id": "",
					"goods_money": "",
					"discount_money": "",
					"coupon_money": "",
					"shop_coupon_money": "",
					"order_id": "",
					"goods_id": "",
					"sku_id": "",
					"goods_name": "",
					"sku_name": "",
					"can_refund_num": "",
					"can_refund_type": ""
				},
				"num": 1,
				"dataMoney": {
					"refund_money": ""
				},
				"afterSale": [{
					"name": "退款（无需退货）",
					"value": "1",
					"image": ""
				}, {
					"name": "退货退款",
					"value": "2",
					"image": ""
				}],
				"afterSaleLable": "",
				"afterSaleID": "",
				"refundReason": [],
				"reason_name": "",
				"reason_id": "",
				"content": "",
				"url": [],
				"image": "",
				"text": "shenqingchengg",
				"aid": "1032"
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			/**
			 * @returns 
			 * Android       安卓
			 * IOS       苹果
			 * Web       H5 或 pc
			 * Wechat       微信小程序
			 * Alipay       支付宝小程序
			 * Baidu       百度小程序
			 * ByteBounce       抖音小程序
			 * 360       360小程序
			 * FastApp       快应用
			 */
			appSystemIdentification() {
				return this.$store.state.appSystemIdentification
			}
		},
		watch: {},
		onLoad(options) {
			let {
				aid
			} = options
			if (aid !== undefined) this.aid = aid
			this.getInfoFunc()
			this.getRefundReasonFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取商品信息
			async getInfoFunc() {
				//请求方法
				//数据验证

				let datadataShopInfo = await this.$api.post(global.apiUrls.post64258181598c7, {
					order_goods_id: this.aid
				});

				if (datadataShopInfo.data.code != 1) {
					this.$message.info(datadataShopInfo.data.msg);
					return
				}
				let infodataShopInfo = datadataShopInfo.data;
				this.dataShopInfo = infodataShopInfo.data

				this.num = this.dataShopInfo.can_refund_num
				this.getMoneyFunc()
				if (this.dataShopInfo.can_refund_type == 1) {
					this.afterSale = [{
						name: '退款（无需退货）',
						value: '1',
						image: ''
					}]
				}
				if (this.dataShopInfo.can_refund_type == 2) {
					this.afterSale = [{
						name: '退款（无需退货）',
						value: '1',
						image: ''
					}, {
						name: '退货退款',
						value: '2',
						image: ''
					}]
				}
				this.getRefundReasonFunc()
			},
			//获取退款金额
			async getMoneyFunc() {
				//请求方法
				//数据验证

				let datadataMoney = await this.$api.post(global.apiUrls.post64257c480b1a1, {
					order_goods_id: this.aid,
					num: this.num
				});

				if (datadataMoney.data.code != 1) {
					this.$message.info(datadataMoney.data.msg);
					return
				}
				let infodataMoney = datadataMoney.data;
				this.dataMoney = infodataMoney.data

			},
			//获取退款原因
			async getRefundReasonFunc() {
				//请求方法
				//数据验证

				let datarefundReason = await this.$api.get(global.apiUrls.post641ae6544d2d5, {
					type: '1',
					goods_type: this.dataShopInfo.can_refund_type
				});

				if (datarefundReason.data.code != 1) {
					this.$message.info(datarefundReason.data.msg);
					return
				}
				let inforefundReason = datarefundReason.data;
				this.refundReason = inforefundReason.data

			},
			//提交申请售后
			async submitRefundFunc() {
				if (!validate(this.afterSaleLable, 'require')) {
					this.$message.info(global.i18n.t('请选择售后类型'));
					return false;
				}
				if (!validate(this.reason_name, 'require')) {
					this.$message.info(global.i18n.t('请选择退款原因'));
					return false;
				}
				if (!validate(this.content, 'require')) {
					this.$message.info(global.i18n.t('请填写退款说明'));
					return false;
				}
				//请求方法
				//数据验证

				let data64219b8235a5e = await this.$api.dbPost(global.apiUrls.post64219b8235a5e, {
					order_id: this.dataShopInfo.order_id,
					goods_id: this.dataShopInfo.goods_id,
					sku_id: this.dataShopInfo.sku_id,
					num: this.num,
					refund_type: this.afterSaleID,
					refund_reason: this.reason_name,
					refund_picture: this.image,
					refund_content: this.content
				});
				if (!data64219b8235a5e) return
				if (data64219b8235a5e.data.code != 1) {
					this.$message.info(data64219b8235a5e.data.msg);
					return
				}



				uni.$emit('shenqingchengg', this.text)
				this.$message.info('提交成功');
				setTimeout(() => {
					this.$urouter.navigateBack(2);
				}, 300)
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto;
	}

	.serviceApply_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.serviceApply_fd0_1 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50rpx;
	}

	.serviceApply_fd0_0_c0 {
		width: 20rpx;
		height: 36rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 32rpx;
	}

	.serviceApply_fd0_0 {
		width: 100rpx;
		height: 88rpx;
	}

	.serviceApply_flex_1 {
		padding: 24rpx 24rpx 0rpx 24rpx;
	}

	.serviceApply_fd1_0_c1_c2_c3 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.serviceApply_fd1_0_c1_c2_c2 {
		margin: 0rpx 0rpx 0rpx auto;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.serviceApply_price2_fd1_0_c1_c2_c1 {
		font-size: 22rpx;
	}

	.serviceApply_fd1_0_c1_c2_c1 {
		color: rgba(239, 58, 58, 1);
		font-weight: 700;
		line-height: 40rpx;
		font-size: 32rpx;
	}

	.serviceApply_fd1_0_c1_c2_c0 {
		font-size: 22rpx;
		font-weight: 700;
		color: rgba(239, 58, 58, 1);
		line-height: 40rpx;
	}

	.serviceApply_fd1_0_c1_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin: 8rpx 0rpx 36rpx 0rpx;
	}

	.serviceApply_fd1_0_c1_c0 {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}

	.serviceApply_fd1_0_c0 {
		width: 200rpx;
		height: 200rpx;
		margin: 0rpx 24rpx 0rpx 0rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.serviceApply_fd1_0 {
		margin: 0rpx 0rpx 34rpx 0rpx;
	}

	.serviceApply_flex_2 {
		background: rgba(248, 248, 248, 1);
		width: 750rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.serviceApply_flex_3 {
		padding: 32rpx 24rpx 140rpx 24rpx;
	}

	.serviceApply_fd3_8_c0 {
		background: var(--benbenbgColor2);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor3);
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin: 12rpx 0rpx 0rpx 0rpx;
	}

	.serviceApply_fd3_8 {
		background: var(--benbenbgColor1);
		position: fixed;
		bottom: calc(0rpx + var(--window-bottom));
		left: 0rpx;
		width: 750rpx;
		height: 150rpx;
		background-size: 100% auto !important;
		z-index: 11;
	}

	.serviceApply_fd3_7_c01 {
		width: 160rpx;
		height: 160rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.serviceApply_fd3_7_c001 {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.serviceApply_fd3_7_c000 {
		top: 0rpx;
		right: 0rpx;
		z-index: 9;
		color: #ff5536;
	}

	.serviceApply_fd3_7_c00 {
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.serviceApply_numberfd3_6_c0_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(191, 191, 191, 1);
	}

	.serviceApply_numberfd3_6_c0 {
		width: 100%;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 42rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.serviceApply_input_fd3_6 {
		width: 100%;
		height: 140rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: var(--benbenFontColor0);
	}

	.serviceApply_fd3_6 {
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		height: 272rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.serviceApply_fd3_5 {
		padding: 32rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.serviceApply_fd3_4 {
		border-bottom: 1px solid #eee;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		padding: 0rpx 0rpx 20rpx 0rpx;
	}

	.serviceApply_price2_fd3_3_c2 {
		font-size: 22rpx;
		font-weight: 700;
		color: rgba(240, 35, 37, 1);
	}

	.serviceApply_price1_fd3_3_c2 {
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(240, 35, 37, 1);
	}

	.serviceApply_fd3_3_c2 {
		color: var(--benbenFontColor7);
		font-weight: 600;
	}

	.serviceApply_fd3_3_c1 {
		font-size: 20rpx;
		font-weight: 700;
		color: rgba(239, 58, 58, 1);
		margin: 0rpx 0rpx 0rpx auto;
	}

	.serviceApply_fd3_3 {
		margin: 0rpx 0rpx 8rpx 0rpx;
	}

	.serviceApply_fd3_2_c1_c0 {
		height: 50rpx;
		margin: 0rpx 4rpx 0rpx 4rpx;
		width: 50rpx;
	}

	::v-deep .serviceApply_numberBoxInputfd3_2_c1 {
		background: #f2f3f5;
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		color: #323232;
		font-size: 28rpx;
	}

	.serviceApply_fd3_2_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(17, 17, 17, 1);
		margin: 0rpx auto 0rpx 0rpx;
	}

	.serviceApply_fd3_2 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.serviceApply_fd3_0_c2 {
		width: 16rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.serviceApply_fd3_0_c1 {
		margin: 0rpx 20rpx 0rpx auto;
		text-align: right;
		font-size: 32rpx;
		font-weight: 400;
		color: var(--benbenFontColor0);
	}

	.serviceApply_fd3_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(17, 17, 17, 1);
	}

	.serviceApply_fd3_0 {
		margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.serviceApply_picker4_0_c2 {
		color: var(--benbenFontColor4);
		font-size: 28rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.serviceApply_picker4_0_c1 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50rpx;
	}

	.serviceApply_picker4_0_c0 {
		color: #999999;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.serviceApply_picker4_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 90rpx;
	}

	.serviceApply_picker5_0_c2 {
		color: var(--benbenFontColor4);
		font-size: 28rpx;
		font-weight: 700;
		line-height: 40rpx;
	}

	.serviceApply_picker5_0_c1 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50rpx;
	}

	.serviceApply_picker5_0_c0 {
		color: #999999;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.serviceApply_picker5_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 90rpx;
	}
</style>